<template>
  <div class="sum">
<div class="panle">
  <div class="title">智慧养殖-黑山羊管理平台</div>
  <el-form :model="form" label-width="80px">
    <el-form-item label="账号" class="input1" >
      <el-input v-model="form.account"></el-input>

    </el-form-item>
    <el-form-item label="密码" class="input2">
      <el-input v-model="form.password" show-password></el-input>

    </el-form-item>
    <el-button @click="btn" class="login" >登录</el-button>

  </el-form>

</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      form:{
        account:'',
        password:''


      }
    }

  },
  methods:{
    btn(){
      // 拿到数据
      console.log(this.form);
      // 传给后端
     axios.post('/day19_04_ssm_crud_war/users/login',this.form).then(res=>{
       // console.log(res.data.code);
       if(res.data.code==1){
         let user=res.data.data[0]
         console.log(user)
         this.$message({
           message: "登录成功，即将跳转到首页..",
           type: "success",
         });
         localStorage.setItem('user',JSON.stringify(user));
         this.$router.push("/home");
       } else{
         this.$message({
           message:"登录失败，请检查账号密码重新输入",
           type: "default",
         });
       }

     })
      //
      // this.$message({
      //   showClose: true,
      //   message: '登录成功！欢迎公主来到首页~~~',
      //   type: 'success'
      // });
      // // 跳转页面
      // this.$router.push('/home');
    }

  }

}
</script>

<style lang="less" scoped>

.sum{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1000px;
  background: linear-gradient(to right bottom,#ffffff,#6459ed);
}
.panle{
  width: 400px;
  height: 420px;
  background: white;
  border-radius: 10px;
  padding: 25px;

}
.title{
  width: 100%;
  height: 60px;
  color: #6459ed;
  font-weight: 600;
  text-align: center;
  line-height: 60px;
  margin-bottom: 30px;
  font-size: 20px;
}
.login{
  width: 50%;
  color: #6459ed;
  margin-left: 25%;
}
.input1{
  width: 360px;
  margin-bottom: 40px;
}
.input2{
  width: 360px;
  margin-bottom: 40px;

}
</style>